<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>steps</title>
	</head>
	<style>
		
		body {
			margin: 0;
			padding: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			height: 100vh;
			background-color: #fff;
			min-width: 1200px;
			overflow: auto;
			font-size: 14px;
			color: #40485B;
			padding-bottom: 100px;
			padding-top: 100px;
		}
		
		.con {
			position: relative;
			padding-left: 27px;
		}

		*,
		*:before,
		*:after {
			-webkit-box-sizing: inherit;
			box-sizing: inherit;
		}

		.con:after {
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			width: 1px;
			height: 100%;
			background: #e3e9ed;
		}

		.con .e_header:first-child,
		.e_con:first-child {
			padding-top: 0;
		}

		.con .e_header {
			padding-top: 9px;
		}

		.con .e_header {
			min-width: 30px;
			padding-top: 16px;
			padding-bottom: 9px;
			min-height: 30px;
			-webkit-box-sizing: border-box;
			-moz-box-sizing: border-box;
			box-sizing: border-box;
		}

		.circle {
			width: 30px;
			height: 30px;
			line-height: 30px;
			border-radius: 50%;
			color: #fff;
			background: #fe7708;
			font-size: 12px;
			text-align: center;
			position: absolute;
			display: inline-block;
			left: -14px;
			z-index: 10;
		}

		.time {
			font-weight: 700;
			line-height: 32px;
			font-size: 16px;
		}

		.c_con {
			padding-top: 5px;
			padding-bottom: 5px;
			word-break: normal;
		}

		

		.e_head {
			padding-left: 2px;
			display: -webkit-box;
			display: -webkit-flex;
			display: -moz-box;
			display: -ms-flexbox;
			display: flex;
			-webkit-box-align: baseline;
			-webkit-align-items: baseline;
			-moz-box-align: baseline;
			-ms-flex-align: baseline;
			align-items: baseline;
		}

		.e_title {
			overflow-wrap: break-word;
		}

		a {
			text-decoration: none;
			cursor: pointer;
			color: #005980;
		}

		time {
			webkit-flex-shrink: 0;
			-ms-flex-negative: 0;
			flex-shrink: 0;
			padding-left: 8px;
			color: #8c92a4;
		}

		.e_body {
			padding-top: 4px;
			font-size: 15px;
			margin: 5px 0;
			padding-left: 20px;
		}

		ul {
			display: block;
			list-style-type: disc;
			margin-block-start: 1em;
			margin-block-end: 1em;
			margin-inline-start: 0px;
			margin-inline-end: 0px;
			padding-inline-start: 40px;
		}

		li {
			list-style: none;
		}

		.ava {
			width: 20px;
			height: 20px;
			border-radius: 50%;
			margin-right: 0.25em;
			display: inline-block;
		}

		.circle0 {
			left: -4px;
			width: 10px;
			height: 10px;
			border-radius: 50%;
			border: 2px solid #fe7708;
			background: #fff;
			position: absolute;
			display: inline-block;
			z-index: 10;
		}
		svg{
			    width: 20px;
			    height: 20px;
			    float: left;
			    padding-right: 5px;
		}
	</style>
	<body>
		<section id="app">
			<div class="con">
				<div class="event" v-for="(item,index) in 3" :key="index">
					<div class="e_header">
						<div class="circle" v-if="index==0">今日</div>
						<div class="circle0" v-else></div>
						<div class="time">2021-10-06</div>
					</div>
					<div class="e_con">
						<div class="c_con" v-for="(item,index) in 2" :key="index">
							<div class="push">
								<svg t="1633535670442" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2694" width="200" height="200"><path d="M565.333333 779.914667l51.445334-54.912a31.733333 31.733333 0 0 1 45.226666-1.226667 32.64 32.64 0 0 1 1.216 45.770667l-97.418666 104a37.034667 37.034667 0 0 1-52.821334 1.397333l-108.362666-104.202667a32.64 32.64 0 0 1-1.152-45.770666 31.733333 31.733333 0 0 1 45.248-1.173334L501.333333 774.421333V512.074667c0-17.877333 14.325333-32.373333 32-32.373334s32 14.506667 32 32.373334v267.84zM512 138.666667c123.018667 0 228.213333 86.709333 259.424 206.88C864.298667 347.146667 938.666667 426.090667 938.666667 522.688c0 97.6-75.914667 177.173333-170.133334 177.173333-17.674667 0-32-14.496-32-32.373333 0-17.877333 14.325333-32.373333 32-32.373333 58.357333 0 106.133333-50.08 106.133334-112.426667 0-62.336-47.776-112.416-106.133334-112.416-5.856 0-11.626667 0.501333-17.301333 1.482667-17.621333 3.050667-34.304-9.098667-37.024-26.986667C698.346667 280.693333 612.714667 203.424 512 203.424c-73.834667 0-140.928 41.536-177.376 107.861333a31.914667 31.914667 0 0 1-30.122667 16.576 140.373333 140.373333 0 0 0-9.568-0.32c-80.149333 0-145.6 68.586667-145.6 153.781334 0 85.184 65.450667 153.792 145.6 153.792 17.674667 0 32 14.496 32 32.373333 0 17.877333-14.325333 32.373333-32 32.373333C178.912 699.861333 85.333333 601.770667 85.333333 481.322667c0-118.314667 90.293333-215.061333 203.456-218.453334C338.090667 186.24 421.013333 138.666667 512 138.666667z" p-id="2695" fill="#8a8a8a"></path></svg>
								<div class="e_head">
									<div class="e_title">推送到了
										<a>susuhhhhhh/web_demos的 master 分支</a>
									</div>
									<time>0分钟前</time>
								</div>
								<div class="e_body">
									<ul>
										<li>
											<a><img class="ava" src="https://i.postimg.cc/mgsKJGLw/susu1.jpg"></a>
											<a>0ecabb1 </a>
											<span>update gitee上传的步骤条.</span>
										</li>
									</ul>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</section>
	</body>
	<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	<script>
		var app = new Vue({
			el: '#app',
			data: {

			}
		})
	</script>
</html>
